{% macro post(data) %}
    {% from 'tools/card.html' import nonModal %}
    
    {% set head %}
        <div class="d-flex align-items-start">
            <img src="{{ data.Personal[0].img_icon }}" alt="用户头像"
                 class="rounded-circle me-3"
                 style="width: 60px; height: 60px; object-fit: cover; border: 2px solid #ddd;" />

            <div class="flex-grow-1">
                <div class="d-flex align-items-center mb-2">
                    <a href="{{ url_for('personal.get_anyone_page_of_personal', uid=data.Personal[0].id) }}" class="fw-bold me-2">{{ data.User[0].username }}</a>
                    <span class="badge bg-secondary"> {{ data.Personal[0].role }} </span>
                    <span class="badge bg-primary">{{ data.Blog[0].sort }}</span>
                    <small class="text-muted"> {{ data.Blog[0].time }} </small>
                </div>
                <a href="{{ url_for('post.get_anyone_page_of_blog', pid=data.Blog[0].id) }}">{{ data.Blog[0].title }}</a>
            </div>
        </div>
    {% endset %}

    {% set footer %}
        <ul class="list-group">
            {% for i in data.Comment %}
            <li class="list-group-item">
                <div class="d-flex align-items-start">
                    <img src="{{ i.Personal[0].img_icon }}" alt="用户头像"
                         class="rounded-circle me-3"
                         style="width: 60px; height: 60px; object-fit: cover; border: 2px solid #ddd;" />

                    <div class="flex-grow-1">
                        <div class="d-flex align-items-center mb-2">
                            <a href="{{ url_for('personal.get_anyone_page_of_personal', uid=i.Personal[0].id) }}" class="fw-bold me-2">{{ i.User[0].username }}</a>
                            <span class="badge bg-secondary"> {{ i.Personal[0].role }} </span>
                            <small class="text-muted"> {{ i.time }} </small>
                        </div>
                        <p class="mb-1">{{ i.content | safe }}</p>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>

        {% if data.writeable %}
            <button id="likeButton_{{ data.Blog[0].id }}" class="btn btn-outline-success me-2">👍 喜欢</button>
            <button id="reportButton_{{ data.Blog[0].id }}" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#reportModal">
                🚨 举报
            </button>

            <script>
                document.getElementById("reportButton_{{ data.Blog[0].id }}").addEventListener('click', () => {
                    fetchPost('{{ url_for('post.post_anyone_service_of_recheck_blog', pid=data.Blog[0].id) }}', {})
                    .then(json => { flash(json.msg); });
                });

                document.getElementById("likeButton_{{ data.Blog[0].id }}").addEventListener('click', () => {
                    fetchPost('{{ url_for('post.post_anyone_service_of_like_blog', pid=data.Blog[0].id) }}', {})
                    .then(json => { flash(json.msg); });
                });
            </script>

            <form class="mt-3">
                <div class="input-group">
                    <input type="hidden" id="pid_{{ data.Blog[0].id }}" value="{{ data.Blog[0].id }}">
                    <input type="text" id="content_{{ data.Blog[0].id }}" class="form-control" placeholder="输入评论..." required>
                    <button id="submitbut_{{ data.Blog[0].id }}" type="submit" class="btn btn-primary">发送</button>
                </div>
            </form>

            <script>
                document.getElementById("submitbut_{{ data.Blog[0].id }}").addEventListener('click', (e) => {
                    e.preventDefault();
                    let data = {
                        'pid': document.getElementById("pid_{{ data.Blog[0].id }}").value,
                        'content': document.getElementById("content_{{ data.Blog[0].id }}").value,
                    };
                    fetchPost('{{ url_for('post.post_my_model_of_comment') }}', data)
                    .then(json => { flash(json.msg); });
                });
            </script>
        {% endif %}
    {% endset %}

    {{ nonModal(
        head=head,
        body=data.Blog[0].content | safe,
        footer=footer | safe,
        collapse=False
    ) }}
{% endmacro %}
